<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>请选择您喜欢的运动</h1>
		<p>
			<span>篮球</span>
			<input type="checkbox" name="" id="c1" value="lanqiu" />
			<label for="c1"></label>
		</p>
		<p>
			<span>足球</span>
			<input type="checkbox" name="" id="c2" value="zuqiu" checked="checked"/>
			<label for="c2"></label>
		</p>
		<p>
			<span>羽毛球</span>
			<input type="checkbox" name="" id="c3" value="yumaoqiu" checked="checked"/>
			<label for="c3"></label>
		</p>
		
	</body>
</html>

<style type="text/css">
	span {
		display: inline-block;
		width: 50px;
	}
	/* 把选框加大,边框颜色变为橙色,小勾变成红色 */
	input {
		display: none;
	}
	label {
		border: 1px solid orange;
		width: 30px;
		height: 30px;
		display: inline-block;
		text-align: center;
	}
	/* 被选中的input标签后面的label标签 的:after的设置 */
	input:checked+label:after {
		content: '';
		border: 1px solid red;
		width: 10px;
		height: 20px;
		display: inline-block;
		border-top: 1px solid transparent;
		border-left: 1px solid transparent;
		transform: rotate(30deg);
	}
	p:after {
		content: '';
		display: inline-block;
		height: 100%;
	}
	p>* {
		vertical-align: middle;
	}
	
</style>
